<template>
  <mu-dialog title="关于" width="360" :open.sync="open">
    <div class="about">
      <p>Copyright &copy; 2018-{{ currentYear }} DDLTECH.</p>
      <p>All rights reserved.</p>
      <p><a href="http://www.miitbeian.gov.cn" target="_blank">陕ICP备18011800号.</a></p>
      <p>系统版本：{{ version.current.text }}</p>
      <p>技术支持：<a href="https://www.tiaozhan.com" target="_blank">挑战网</a></p>
      <p>关注作者：<a href="https://github.com/finntenzor" target="_blank">FinnTenzor</a></p>
    </div>
    <mu-button slot="actions" flat color="primary" @click="close()">关闭</mu-button>
  </mu-dialog>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'AboutDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      currentYear: (new Date()).getFullYear()
    }
  },
  computed: {
    ...mapGetters({
      version: 'version'
    })
  },
  watch: {
    value(val) {
      this.open = val
    },
    open(val) {
      this.$emit('input', val)
    }
  },
  created() {
    this.open = this.value
  },
  methods: {
    close() {
      this.open = false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped>
.about {
  margin-top: 30px;
  text-align: center;
  font-size: 0.8em;
}
.about a {
  color: inherit;
}
</style>
